<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#demo {
				width: 500px;
				height: 300px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			function test() {

				// 1.创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();

				// 2.设置连接参数
				xhr.open("GET", "data.html", true)// true表示 异步

				// 3.发送请求 
				xhr.send();

				// 4.绑定事件
				xhr.onreadystatechange = function() {

					// console.debug(xhr.readyState)
					// console.info(xhr.status)
					// console.info(xhr.responseText)
					if(xhr.readyState == 4 ) {
						if(xhr.status == 200){
							var demo = document.getElementById("demo")
							demo.innerHTML = xhr.responseText
						}else{
							alert(xhr.status+"  "+xhr.statusText)
						}
						
					}
				}
				
				
				//alert("完成！")

			}
		</script>
	</head>

	<body>

		<h1>demo</h1>
		<button onclick="test()">TEST</button>
		<div id="demo">

		</div>

	</body>

</html>